<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { useLoginUserStore } from '@/stores/loginUser'
import { addApp, listMyAppVoByPage, listGoodAppVoByPage } from '@/api/appController'
import dayjs from 'dayjs'
import { getDeployUrl } from '@/config/env.ts'
import LogoAnimated from '@/assets/ai/logo-animated.svg'

const router = useRouter()
const loginUserStore = useLoginUserStore()

// 用户提示词
const userPrompt = ref('')
const creating = ref(false)
const activeCategory = ref('电商平台')

// 我的应用数据
const myApps = ref<API.AppVO[]>([])
const myAppsPage = reactive({
  current: 1,
  pageSize: 6,
  total: 0,
})

// 精选应用数据
const featuredApps = ref<API.AppVO[]>([])
const featuredAppsPage = reactive({
  current: 1,
  pageSize: 6,
  total: 0,
})

// 设置提示词
const setPrompt = (prompt: string) => {
  userPrompt.value = prompt
}

// 预设的丰富提示词
const promptSuggestions = [
  {
    category: '电商平台',
    items: [
      '创建一个现代化的电商购物平台，包含商品展示、购物车、用户评价和支付功能',
      '设计一个奢侈品电商网站，具有高端视觉效果和VIP会员系统',
      '开发一个二手交易平台，支持商品发布、在线聊天和安全交易'
    ]
  },
  {
    category: '企业官网',
    items: [
      '构建一个科技公司官网，展示产品服务、团队介绍和新闻动态',
      '设计一个创意设计工作室网站，突出作品展示和设计理念',
      '创建一个餐饮连锁企业官网，包含门店查询、在线订餐和品牌故事'
    ]
  },
  {
    category: '管理后台',
    items: [
      '开发一个电商运营后台，包含订单管理、库存统计和数据分析',
      '创建一个内容管理系统，支持文章发布、用户管理和权限控制',
      '设计一个项目管理平台，具备任务分配、进度跟踪和团队协作功能'
    ]
  },
  {
    category: '社交应用',
    items: [
      '构建一个兴趣社区平台，支持话题讨论、用户关注和内容推荐',
      '开发一个知识分享平台，包含问答系统、专栏文章和专家认证',
      '创建一个本地生活社区，提供邻里互助、活动发布和商家推荐'
    ]
  },
  {
    category: '工具应用',
    items: [
      '设计一个在线图片编辑器，支持滤镜、裁剪和图层管理',
      '开发一个个人财务管理工具，包含记账、预算和投资跟踪',
      '创建一个在线简历制作平台，提供多种模板和一键导出功能'
    ]
  }
]

// 创建应用
const createApp = async () => {
  if (!userPrompt.value.trim()) {
    message.warning('请输入应用描述')
    return
  }

  if (!loginUserStore.loginUser.id) {
    message.warning('请先登录')
    return
  }

  creating.value = true
  try {
    const res = await addApp({
      initPrompt: userPrompt.value.trim(),
    })

    if (res.data.code === 0 && res.data.data) {
      message.success('应用创建成功')
      // 跳转到对话页面，确保ID是字符串类型
      const appId = String(res.data.data)
      await router.push(`/app/chat/${appId}`)
    } else {
      message.error('创建失败：' + res.data.message)
    }
  } catch (error) {
    console.error('创建应用失败：', error)
    message.error('创建失败，请重试')
  } finally {
    creating.value = false
  }
}

// 加载我的应用
const loadMyApps = async () => {
  if (!loginUserStore.loginUser.id) {
    return
  }

  try {
    const res = await listMyAppVoByPage({
      pageNum: myAppsPage.current,
      pageSize: myAppsPage.pageSize,
      sortField: 'createTime',
      sortOrder: 'desc',
    })

    if (res.data.code === 0 && res.data.data) {
      myApps.value = res.data.data.records || []
      myAppsPage.total = res.data.data.total || 0
    }
  } catch (error) {
    console.error('加载我的应用失败：', error)
  }
}

// 加载精选应用
const loadFeaturedApps = async () => {
  try {
    const res = await listGoodAppVoByPage({
      pageNum: featuredAppsPage.current,
      pageSize: featuredAppsPage.pageSize,
      sortField: 'createTime',
      sortOrder: 'desc',
    })

    if (res.data.code === 0 && res.data.data) {
      featuredApps.value = res.data.data.records || []
      featuredAppsPage.total = res.data.data.total || 0
    }
  } catch (error) {
    console.error('加载精选应用失败：', error)
  }
}

// 查看对话
const viewChat = (appId: string | number | undefined) => {
  if (appId) {
    router.push(`/app/chat/${appId}`)
  }
}

// 查看作品
const viewWork = (app: API.AppVO) => {
  if (app.deployKey) {
    // const url = `http://localhost/${app.deployKey}`
    const url = getDeployUrl(app.deployKey)
    window.open(url, '_blank')
  }
}

// 格式化时间
const formatTime = (time: string | undefined) => {
  if (!time) return ''
  return dayjs(time).format('YYYY-MM-DD')
}

// 页面加载时获取数据
onMounted(() => {
  loadMyApps()
  loadFeaturedApps()
})
</script>

<template>
  <div id="homePage">
    <!-- 网站标题和描述 -->
    <div class="hero-section">
      <div class="hero-background">
        <div class="floating-elements">
          <div class="floating-element" v-for="i in 6" :key="i"></div>
        </div>
      </div>
      <div class="hero-content">
        <div class="logo-container">
          <img :src="LogoAnimated" alt="AI Logo" class="animated-logo" />
        </div>
        <h1 class="hero-title">
          <span class="title-main">AI 智能代码生成平台</span>
          <span class="title-sub">一句话描述，秒级生成应用</span>
        </h1>
        <p class="hero-description">
          基于先进的 AI 技术，将您的创意想法转化为完整的 Web 应用
          <br>
          无需编程基础，人人都能成为开发者
        </p>
        <div class="hero-stats">
          <div class="stat-item">
            <div class="stat-number">10+</div>
            <div class="stat-label">应用已生成</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">5+</div>
            <div class="stat-label">活跃用户</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">99.9%</div>
            <div class="stat-label">成功率</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 用户提示词输入框 -->
    <div class="input-section">
      <div class="input-container">
        <div class="input-header">
          <div class="input-title">
            <span class="title-icon">✨</span>
            <span>描述您的创意想法</span>
          </div>
          <div class="input-subtitle">AI 将为您生成完整的 Web 应用解决方案</div>
        </div>
        <div class="textarea-wrapper">
          <a-textarea
            v-model:value="userPrompt"
            placeholder="例如：创建一个现代化的电商购物平台，包含商品展示、购物车、用户评价和支付功能..."
            :rows="5"
            :maxlength="2000"
            show-count
            class="prompt-input"
          />
          <div class="input-enhancement">
            <div class="enhancement-icons">
              <span class="enhancement-icon" title="智能提示">🤖</span>
              <span class="enhancement-icon" title="语法检查">📝</span>
              <span class="enhancement-icon" title="创意建议">💡</span>
            </div>
          </div>
        </div>
        <div class="input-actions">
          <div class="action-left">
            <span class="tip-text">💡 提示：描述越详细，生成的应用越符合您的需求</span>
          </div>
          <div class="action-right">
            <a-button type="primary" size="large" @click="createApp" :loading="creating" class="create-btn">
              <template #icon>
                <span class="create-icon">🚀</span>
              </template>
              <span class="btn-text">{{ creating ? '正在创建...' : '立即创建应用' }}</span>
            </a-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 智能提示词推荐 -->
    <div class="prompt-suggestions">
      <a-tabs v-model:activeKey="activeCategory" centered class="suggestion-tabs">
        <a-tab-pane v-for="category in promptSuggestions" :key="category.category" :tab="category.category">
          <div class="suggestion-grid">
            <a-card
              v-for="(item, index) in category.items"
              :key="index"
              class="suggestion-card"
              hoverable
              @click="setPrompt(item)"
            >
              <div class="suggestion-content">
                <div class="suggestion-icon">💡</div>
                <p class="suggestion-text">{{ item }}</p>
              </div>
            </a-card>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>

    <!-- 我的作品 -->
    <div class="section">
      <h2 class="section-title">我的作品</h2>
      <div class="app-grid">
        <div v-for="app in myApps" :key="app.id" class="app-card">
          <div class="app-preview">
            <img v-if="app.cover" :src="app.cover" :alt="app.appName" />
            <div v-else class="app-placeholder">
              <span>🤖</span>
            </div>
            <div class="app-overlay">
              <a-space>
                <a-button type="primary" @click="viewChat(app.id)">查看对话</a-button>
                <a-button v-if="app.deployKey" type="default" @click="viewWork(app)"
                >查看作品</a-button
                >
              </a-space>
            </div>
          </div>
          <div class="app-info">
            <h3 class="app-title">{{ app.appName || '未命名应用' }}</h3>
            <p class="app-time">创建于 {{ formatTime(app.createTime) }}</p>
          </div>
        </div>
      </div>
      <div class="pagination-wrapper">
        <a-pagination
          v-model:current="myAppsPage.current"
          v-model:page-size="myAppsPage.pageSize"
          :total="myAppsPage.total"
          :show-size-changer="false"
          :show-total="(total: number) => `共 ${total} 个应用`"
          @change="loadMyApps"
        />
      </div>
    </div>

    <!-- 精选案例 -->
    <div class="section">
      <h2 class="section-title">精选案例</h2>
      <div class="featured-grid">
        <div v-for="app in featuredApps" :key="app.id" class="featured-card">
          <div class="featured-preview">
            <img v-if="app.cover" :src="app.cover" :alt="app.appName" />
            <div v-else class="featured-placeholder">
              <span>🤖</span>
            </div>
            <div class="featured-overlay">
              <a-space>
                <a-button type="primary" @click="viewChat(app.id)">查看对话</a-button>
                <a-button v-if="app.deployKey" type="default" @click="viewWork(app)"
                >查看作品</a-button
                >
              </a-space>
            </div>
          </div>
          <div class="featured-info">
            <h3 class="featured-title">{{ app.appName || '未命名应用' }}</h3>
            <p class="featured-author">{{ app.user?.userName || 'NoCode 官方' }}</p>
          </div>
        </div>
      </div>
      <div class="pagination-wrapper">
        <a-pagination
          v-model:current="featuredAppsPage.current"
          v-model:page-size="featuredAppsPage.pageSize"
          :total="featuredAppsPage.total"
          :show-size-changer="false"
          :show-total="(total: number) => `共 ${total} 个案例`"
          @change="loadFeaturedApps"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* 统一动画变量 */
:root {
  --animation-duration-fast: 0.2s;
  --animation-duration-normal: 0.3s;
  --animation-duration-slow: 0.5s;
  --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --animation-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 动画定义 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes glow {
  0%, 100% {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
  }
  50% {
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.8), 0 0 60px rgba(102, 126, 234, 0.6);
  }
}

#homePage {
  min-height: 100vh;
  width: 100%;
  position: relative;
  overflow-x: hidden;
  background: transparent;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  animation: fadeInUp 0.8s var(--animation-easing);
}

/* 英雄区域 */
.hero-section {
  position: relative;
  text-align: center;
  padding: 80px 20px 60px;
  color: white;
  overflow: hidden;
  animation: slideInLeft 1s var(--animation-easing);
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
    rgba(102, 126, 234, 0.95) 0%,
    rgba(118, 75, 162, 0.9) 30%,
    rgba(240, 147, 251, 0.85) 60%,
    rgba(245, 87, 108, 0.8) 100%);
  backdrop-filter: blur(20px);
  transition: all var(--animation-duration-slow) var(--animation-easing);
}

.hero-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  animation: glow 4s ease-in-out infinite;
}

.floating-elements {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.floating-element {
  position: absolute;
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  animation: float 8s ease-in-out infinite;
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(255, 255, 255, 0.1);
  transition: all var(--animation-duration-normal) var(--animation-easing);
}

.floating-element:hover {
  transform: scale(1.2);
  background: rgba(255, 255, 255, 0.25);
}

.floating-element:nth-child(1) {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.floating-element:nth-child(2) {
  top: 60%;
  left: 20%;
  animation-delay: 1s;
  width: 40px;
  height: 40px;
}

.floating-element:nth-child(3) {
  top: 30%;
  right: 15%;
  animation-delay: 2s;
  width: 80px;
  height: 80px;
}

.floating-element:nth-child(4) {
  top: 70%;
  right: 25%;
  animation-delay: 3s;
  width: 50px;
  height: 50px;
}

.floating-element:nth-child(5) {
  top: 10%;
  left: 60%;
  animation-delay: 4s;
  width: 35px;
  height: 35px;
}

.floating-element:nth-child(6) {
  top: 80%;
  left: 70%;
  animation-delay: 5s;
  width: 45px;
  height: 45px;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
    opacity: 1;
  }
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 40px;
  animation: fadeInUp 1.2s var(--animation-easing) 0.3s both;
}

.logo-container {
  margin-bottom: 30px;
  animation: scaleIn 0.8s var(--animation-easing-bounce) 0.5s both;
}

.animated-logo {
  width: 120px;
  height: 120px;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
  transition: all var(--animation-duration-normal) var(--animation-easing);
}

.animated-logo:hover {
  transform: scale(1.1) rotate(5deg);
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.3));
}

.hero-title {
  margin: 0 0 24px;
  line-height: 1.2;
}

.title-main {
  display: block;
  font-size: 52px;
  font-weight: 800;
  margin-bottom: 8px;
  background: linear-gradient(45deg, #fff, #f0f8ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.title-sub {
  display: block;
  font-size: 24px;
  font-weight: 400;
  opacity: 0.9;
  color: #e8f4fd;
}

.hero-description {
  font-size: 18px;
  margin: 0 0 40px;
  opacity: 0.95;
  line-height: 1.6;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 500;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  animation: fadeInUp 1s var(--animation-easing) 0.6s both;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-top: 40px;
  animation: slideInRight 1s var(--animation-easing) 0.8s both;
}

.stat-item {
  text-align: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all var(--animation-duration-normal) var(--animation-easing);
}

.stat-item:hover {
  transform: translateY(-5px) scale(1.05);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
}

.stat-number {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.stat-label {
  font-size: 14px;
  opacity: 0.9;
  color: #e8f4fd;
  font-weight: 500;
}

/* 输入区域 */
.input-section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 60px;
  padding: 0 40px;
  animation: fadeInUp 1s var(--animation-easing) 1s both;
}

.input-container {
  position: relative;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all var(--animation-duration-normal) var(--animation-easing);
  overflow: hidden;
}

.input-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  border-radius: 24px 24px 0 0;
}

.input-container:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18);
  background: rgba(255, 255, 255, 1);
}

.input-header {
  text-align: center;
  margin-bottom: 24px;
  animation: fadeInUp 0.6s var(--animation-easing) 0.2s both;
}

.input-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 24px;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 8px;
}

.title-icon {
  font-size: 28px;
  animation: glow 2s ease-in-out infinite;
}

.input-subtitle {
  font-size: 16px;
  color: #64748b;
  font-weight: 500;
  opacity: 0.8;
}

.textarea-wrapper {
  position: relative;
  margin-bottom: 24px;
}

.prompt-input {
  border-radius: 20px;
  border: 2px solid rgba(226, 232, 240, 0.8);
  font-size: 16px;
  padding: 24px;
  transition: all var(--animation-duration-normal) var(--animation-easing);
  background: rgba(248, 250, 252, 0.5);
  resize: none;
  font-weight: 500;
  line-height: 1.7;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.prompt-input:hover {
  border-color: rgba(102, 126, 234, 0.4);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02), 0 0 0 3px rgba(102, 126, 234, 0.05);
}

.prompt-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.02);
  background: #fff;
  transform: scale(1.005);
}

.input-enhancement {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
}

.enhancement-icons {
  display: flex;
  gap: 8px;
}

.enhancement-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  transition: all var(--animation-duration-normal) var(--animation-easing);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(226, 232, 240, 0.5);
}

.enhancement-icon:hover {
  transform: scale(1.1) translateY(-2px);
  background: rgba(102, 126, 234, 0.1);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.input-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.action-left {
  flex: 1;
}

.tip-text {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-right {
  flex-shrink: 0;
}

.create-btn {
  height: 56px;
  padding: 0 32px;
  border-radius: 28px;
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.35);
  transition: all var(--animation-duration-normal) var(--animation-easing);
  position: relative;
  overflow: hidden;
  min-width: 180px;
}

.create-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s;
}

.create-btn:hover::before {
  left: 100%;
}

.create-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 15px 40px rgba(102, 126, 234, 0.5);
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

.create-btn:active {
  transform: translateY(-1px) scale(1.02);
  transition: all 0.1s var(--animation-easing);
}

.create-icon {
  font-size: 18px;
  margin-right: 8px;
  display: inline-block;
  animation: bounce 2s infinite;
}

.btn-text {
  font-weight: 600;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-3px);
  }
  60% {
    transform: translateY(-2px);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .input-actions {
    flex-direction: column;
    gap: 16px;
  }
  
  .action-left {
    text-align: center;
  }
  
  .create-btn {
    width: 100%;
    min-width: auto;
  }
  
  .input-title {
    font-size: 20px;
  }
  
  .input-subtitle {
    font-size: 14px;
  }
}

/* 提示词推荐区域 */
.prompt-suggestions {
  width: 100%;
  margin: 0 auto 80px;
  padding: 0 40px;
  animation: fadeInUp 1s var(--animation-easing) 1.2s both;
}

.suggestion-tabs {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 24px;
  padding: 35px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all var(--animation-duration-normal) var(--animation-easing);
  position: relative;
  overflow: hidden;
}

.suggestion-tabs::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.02) 0%, rgba(118, 75, 162, 0.02) 100%);
  pointer-events: none;
}

.suggestion-tabs:hover {
  transform: translateY(-2px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

.suggestion-tabs :deep(.ant-tabs-nav) {
  margin-bottom: 30px;
}

.suggestion-tabs :deep(.ant-tabs-tab) {
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 16px;
  margin-right: 12px;
  transition: all var(--animation-duration-normal) var(--animation-easing);
  background: rgba(102, 126, 234, 0.05);
  border: 1px solid rgba(102, 126, 234, 0.1);
}

.suggestion-tabs :deep(.ant-tabs-tab):hover {
  background: rgba(102, 126, 234, 0.1);
  transform: translateY(-2px);
}

.suggestion-tabs :deep(.ant-tabs-tab-active) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
  transform: translateY(-2px);
}

.suggestion-tabs :deep(.ant-tabs-ink-bar) {
  display: none;
}

.suggestion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
}

.suggestion-card {
  border-radius: 18px;
  border: 2px solid rgba(240, 240, 240, 0.8);
  transition: all var(--animation-duration-normal) var(--animation-easing);
  cursor: pointer;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  position: relative;
}

.suggestion-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.02) 0%, rgba(118, 75, 162, 0.02) 100%);
  opacity: 0;
  transition: all var(--animation-duration-normal) var(--animation-easing);
  pointer-events: none;
}

.suggestion-card:hover {
  border-color: #667eea;
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 15px 40px rgba(102, 126, 234, 0.2);
  background: rgba(255, 255, 255, 0.95);
}

.suggestion-card:hover::before {
  opacity: 1;
}

.suggestion-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
}

.suggestion-icon {
  font-size: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

.suggestion-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  font-weight: 500;
}

/* 区域标题 */
.section {
  width: 100%;
  margin: 0 auto 80px;
  padding: 0 40px;
}

.section-title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 40px;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 我的作品网格 */
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.app-card {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
  transition: all var(--animation-duration-slow) var(--animation-easing);
  cursor: pointer;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  animation: scaleIn 0.6s var(--animation-easing) calc(var(--card-index, 0) * 0.1s) both;
}

.app-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.03) 0%, rgba(118, 75, 162, 0.03) 100%);
  opacity: 0;
  transition: all var(--animation-duration-normal) var(--animation-easing);
  pointer-events: none;
  z-index: 1;
}

.app-card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18);
}

.app-card:hover::before {
  opacity: 1;
}

.app-preview {
  height: 220px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.app-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all var(--animation-duration-slow) var(--animation-easing);
  filter: brightness(1.05) contrast(1.1);
}

.app-card:hover .app-preview img {
  transform: scale(1.15) rotate(1deg);
  filter: brightness(1.1) contrast(1.2);
}

.app-placeholder {
  font-size: 52px;
  color: #cbd5e1;
  opacity: 0.7;
  transition: all var(--animation-duration-normal) var(--animation-easing);
}

.app-card:hover .app-placeholder {
  transform: scale(1.1);
  color: #94a3b8;
}

.app-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.95), rgba(118, 75, 162, 0.95));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all var(--animation-duration-slow) var(--animation-easing);
  backdrop-filter: blur(10px);
  z-index: 3;
}

.app-card:hover .app-overlay {
  opacity: 1;
  backdrop-filter: blur(15px);
}

.app-info {
  padding: 28px;
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

.app-title {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 14px;
  color: #1e293b;
  line-height: 1.4;
  transition: all var(--animation-duration-normal) var(--animation-easing);
}

.app-card:hover .app-title {
  color: #667eea;
  transform: translateX(2px);
}

.app-time {
  font-size: 14px;
  color: #64748b;
  margin: 0;
  opacity: 0.9;
  font-weight: 500;
  transition: all var(--animation-duration-normal) var(--animation-easing);
}

.app-card:hover .app-time {
  color: #475569;
  opacity: 1;
}

/* 精选案例网格 */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.featured-card {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
  transition: all var(--animation-duration-slow) var(--animation-easing);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  animation: slideInRight 0.8s var(--animation-easing) calc(var(--card-index, 0) * 0.15s) both;
}

.featured-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.03) 0%, rgba(118, 75, 162, 0.03) 100%);
  opacity: 0;
  transition: all var(--animation-duration-normal) var(--animation-easing);
  pointer-events: none;
  z-index: 1;
}

.featured-card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18);
}

.featured-card:hover::before {
  opacity: 1;
}

.featured-preview {
  height: 220px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.featured-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.featured-card:hover .featured-preview img {
  transform: scale(1.1);
}

.featured-placeholder {
  font-size: 48px;
  color: rgba(255, 255, 255, 0.6);
}

.featured-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(240, 147, 251, 0.9), rgba(245, 87, 108, 0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.4s;
  backdrop-filter: blur(5px);
}

.featured-card:hover .featured-overlay {
  opacity: 1;
}

.featured-info {
  padding: 24px;
}

.featured-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 12px;
  color: #1a1a1a;
  line-height: 1.4;
}

.featured-author {
  font-size: 14px;
  color: #666;
  margin: 0;
  opacity: 0.8;
}

/* 分页 */
.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.pagination-wrapper :deep(.ant-pagination) {
  background: rgba(255, 255, 255, 0.9);
  padding: 16px 24px;
  border-radius: 50px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.pagination-wrapper :deep(.ant-pagination-item) {
  border-radius: 8px;
  border: none;
  background: transparent;
}

.pagination-wrapper :deep(.ant-pagination-item-active) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: transparent;
}

.pagination-wrapper :deep(.ant-pagination-item-active a) {
  color: white;
}

/* 响应式设计 */
@media (min-width: 1400px) {
  .hero-content {
    padding: 0 80px;
  }

  .input-section,
  .prompt-suggestions,
  .section {
    padding: 0 80px;
  }

  .suggestion-grid {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  }
}

@media (max-width: 1024px) {
  .hero-content {
    padding: 0 30px;
  }

  .input-section,
  .prompt-suggestions,
  .section {
    padding: 0 30px;
  }

  .hero-stats {
    gap: 40px;
  }

  .suggestion-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

@media (max-width: 768px) {
  .hero-content {
    padding: 0 20px;
  }

  .input-section,
  .prompt-suggestions,
  .section {
    padding: 0 20px;
  }

  .title-main {
    font-size: 36px;
  }

  .title-sub {
    font-size: 18px;
  }

  .hero-description {
    font-size: 16px;
  }

  .hero-stats {
    flex-direction: column;
    gap: 20px;
  }

  .stat-number {
    font-size: 24px;
  }

  .app-grid,
  .featured-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  .suggestion-grid {
    grid-template-columns: 1fr;
  }

  .input-container {
    padding: 20px;
  }

  .suggestion-tabs {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .hero-section {
    padding: 60px 15px 40px;
  }

  .hero-content,
  .input-section,
  .prompt-suggestions,
  .section {
    padding: 0 15px;
  }

  .title-main {
    font-size: 28px;
  }

  .title-sub {
    font-size: 16px;
  }

  .animated-logo {
    width: 80px;
    height: 80px;
  }

  .create-btn {
    width: 100%;
    margin-top: 16px;
  }

  .app-grid,
  .featured-grid {
    grid-template-columns: 1fr;
  }
}
</style>
